<template>


  <template v-for="(item,index) in props.menuData">
    <el-menu-item v-if="!item.children||item.children.length===0"
                  :index="`${props.index}-${item.meta.id}`"
                  :key="`${props.index}-${item.meta.id}`"
                  @click="handleClick(item,`${props.index}-${item.meta.id}`)"
    >
      <el-icon size="20">
        <component :is="item.meta.icon"></component>
      </el-icon>
      <span>{{item.meta.name}}</span>
    </el-menu-item>
    <el-sub-menu v-else
                :index="`${props.index}-${item.meta.id}`"
                :key="`${props.index}-${item.meta.id}`"
    >
      <template #title>
        <el-icon>
          <component :is="item.meta.icon"></component>
        </el-icon>
        <span>{{item.meta.name}}</span>
      </template>
<!--      递归使用组件减少代码量，注意index的逻辑-->
      <tree-menu :index="`${props.index}-${item.meta.id}`" :menuData="item.children"/>
    </el-sub-menu>

  </template>




</template>
<script setup>

import {Document, Location, Setting} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";
import {useMenuStore} from "../stores/menu.js";

const props = defineProps(['menuData','index']);
//获取路由
const router = useRouter();

const menuStore = useMenuStore();
//跳转
const handleClick = (item,index) => {
  //加载标签
  menuStore.addMenu(item.meta)
  //更新高亮路由
  menuStore.updateMenuActive(index)
  //跳转路由
  router.push(item.meta.path)
}


</script>

<style scoped>

</style>
